<template>
  <div>
    <el-row type="flex" class="row-bg" justify="center" align="middle">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登陆</el-button>
          <el-button @click="cancel">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <button @click="instruct" v-botton>自定义指令</button> 1.0自定义指令

  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    cancel() {
      // console.log(this.alertResult("success"));
      // this.$toast("哈哈哈哈", "center");
      // this.$toast("哈哈哈哈", "top");
      this.$confirmm(this, {
        content: "确定要删除么",
        affirm: "删除",
        // show:true,
        closeShow: true
      });
      this.form = {
        username: "",
        password: ""
      };
    },
    onSubmit() {
      this.$confirmm(this, {
        content: "确定要登陆么",
        affirm: "确定",
        // show:true,
        closeShow: false,
        onAffirma: mag => {
          console.log(mag);
          setTimeout(() => {
            this.$confirmm.hide();
          }, 500);
        }
      });

      //发请求前判断
      if (!this.form.username || !this.form.password) {
        this.$message.error("请填写完整信息!");
        return;
      }
      //发送请求
      this.$axios({
        url: "/login",
        method: "post",
        data: this.form
      })
        .then(res => {
          console.log(res);
          this.$message({
            message: "登陆成功",
            type: "success"
          });
          console.log(res.data.data.token);
          //获得res的token和user,存在本地储存
          localStorage.setItem("token", res.data.data.token);
          const user = JSON.stringify(res.data.data.user);
          localStorage.setItem("user", user);
          this.$router.push("/ArticleList");
        })
        .catch(err => {
          console.log(err);
        });
    },
    instruct() {},

  },
  // 1.1自定义指令
  directives: {
    // https://blog.csdn.net/haduwi/article/details/104949560
    botton: {
      bind: function(el, binding, vnode) {
        //dom树绘制前调用  el为当前节点，binding为信息对象，  vnode vue对象,虚拟节点,指令第一次绑定到元素时调用  
        console.log(1);
      },
      inserted: function(el, binding, vnode) {
        //绘制后 父节点存在时,被绑定元素插入父节点时调用
        console.log(2);
      },
      update: function(el, binding, vnode) {
        //组件更新前的状态
        console.log(3);
      },
      componentUpdated: function(el, binding, vnode) {
        //组件更新后的状态
        console.log(4);
      },
      unbind: function(el, binding, vnode) {
        //销毁时  指令与元素解绑时调用
        console.log(5);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.row-bg {
  //这是一种垂直水平剧中的方法,因为块级元素水平width: 100%;是可以的,但垂直用height=100% 是行不通的,因为如果height=100%往上找,找不到有设置height的地方,不会变化,所以用以下方法
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>
